<template>
  <div class="x-collapse mb-4">
    <div class="flex justify-between header mb-2 items-center" @click="show = !show">
      <span>
        <span :class="[{ active: show }]">{{ title }}</span>
      </span>
      <MinusOutlined v-if="!show"></MinusOutlined>
      <PlusOutlined v-else></PlusOutlined>
    </div>
    <!--  -->
    <a-card v-if="show" :body-style="{ padding: '1rem' }">
      <slot></slot>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

const props = defineProps({
  title: String,
  icon: String,
  expand: {
    type: Boolean,
    default: false,
  },
});
const show = ref();
onMounted(() => {
  show.value = props.expand;
});
</script>

<style lang="scss" scoped>
.x-collapse {
  .active {
    font-weight: 600;
  }
}
</style>
